<template>
  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules';
export default {
  data() {
    return {
      options: {},
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      currentGET('assetRadar').then((res) => {
        if (res.success) {
          this.$nextTick(() => {
            this.init(res.result);
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: 'warning',
          });
        }
      });
    },
    init(radarData) {
      const maxValue = 5; // 雷达图的最大值
      const indicator = radarData.map((item) => ({
        name: item.name,
        max: maxValue,
      }));

      const dataValues = radarData.map((item) => item.value);

      this.options = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF',
          },
        },
        radar: {
          center: ['50%', '50%'], // 雷达图位置
          radius: '60%', // 雷达图大小
          splitNumber: 4, // 网格分割段数
          shape: 'polygon', // 雷达图形状
          splitArea: {
            areaStyle: {
              color: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)'], // 网格背景透明
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.8)', // 更明显的轴线颜色
              width: 1.5, // 增加线宽
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)', // 更明显的网格线颜色
              width: 1.5, // 增加线宽
            },
          },
          indicator: indicator,
        },
        series: [
          {
            name: '资产分布',
            type: 'radar',
            data: [
              {
                value: dataValues,
                name: '资产分布',
                areaStyle: {
                  color: 'rgba(30, 144, 255, 0.5)', // 区域填充颜色
                },
                lineStyle: {
                  color: '#1E90FF', // 边框线颜色
                  width: 2, // 增加边框线宽度
                },
                symbol: 'circle', // 数据点形状
                symbolSize: 8, // 数据点大小
                itemStyle: {
                  color: '#FFD700', // 数据点颜色
                },
              },
            ],
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>

</style>